import React, { Component } from 'react';
import {
	StyleSheet, View, Text, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { BaseItem } from './BaseItem';

const scale = GLOBAL.SCALE;
export class ProductInfo extends Component {
	constructor(props) {
		super(props);
	}

	render() {
		const { data, approveType } = this.props;
		const { goodsChangesInfo, goodsIds } = data || {};
		return (
			<View>
				{/* <BaseItem label={'商品'} value={'甲醛1 —> 甲醛2'} />
				<BaseItem label={'商品'} value={'液化气 —> C4'} /> */}
				{
					goodsIds && goodsIds.length ? goodsIds.map((item, index) => {
						const goodChangeInfo = goodsChangesInfo[item];
						return (
							<View key={index}>
								<View style={styles.productNameView}>
									<Text style={styles.productName}>{goodChangeInfo && goodChangeInfo.length ? goodChangeInfo[0].goodsName : ''}</Text>
								</View>
								{
									goodChangeInfo && goodChangeInfo.length ? goodChangeInfo.map((item, index) => {
										let { changeTypeName, changeLineTypeName, beforeValueDesc, afterValueDesc } = item || {};
										changeTypeName = changeTypeName === 'A' ? changeLineTypeName : changeTypeName;
										return (
											<BaseItem key={index}
												label={changeLineTypeName || changeTypeName}
												beforeValueDesc={beforeValueDesc}
												afterValueDesc={afterValueDesc} />
										)
									})
										: null
								}
							</View>
						)
					})
						: null
				}
			</View>

		)
	}
}

const styles = StyleSheet.create({
	productNameView: {
		marginTop: 12 * scale,
		borderTopColor: '#999',
		borderTopWidth: 1 / PixelRatio.get(),
	},
	productName: {
		paddingTop: 8 * scale,
		color: '#999',
		fontSize: 12 * scale,
	}
})